iT邦幫忙

2022 iThome 鐵人賽

DAY 22
0

今天要來介紹跟RWD佈局非常相關的Bootstrap
點此到官網下載:Bootstrap
對於還不熟悉CSS的人來說實在受益良多,當然也不只侷限於對CSS不熟悉的XD
因為有了Bootstrap就能透過具象的標籤放在class裡頭來達到RWD的效果

導入 Bootstrap

導入 Bootstrap 的方式和平常引入 CSS 檔案的方式一樣

BootstrapCDN

BootstrapCDN 是把 Bootstrap 框架導入專案中最簡單快速的方式
免下載,但需要連上網路,才能使用
Getting Started(這是5.2版Bootstrap) 複製寫好的 HTML 標籤內容和將 CSS、JS檔案引入

  • 記得瀏覽器是由上而下載入檔案後面會覆蓋掉前面的,所以如果自己寫的與Bootstrap衝突的話,以自己優先放在<head>裡的後面

下載編譯檔

不用連上網就能使用 Boostrap 框架
可以到這裡(5.2版)下載
之後再把檔案引入專案目錄裡


安裝好 Bootstrap 後,接著就是在需要時,到官方上去尋找所需的元素,再複製到專案修改

我們前面對RWD已有所認識,
接著我們明天要來運用Bootstrap 的 Grid system 來讓設計網站原型變得快速又有效率


上一篇
來用Figma做出高擬真的使用介面
下一篇
讓網頁有條不紊的隱形柵欄-Bootstrap Grid system
系列文
手把手web初學者30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言